<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jquery练习</title>
</head>
<style>
  body{
    margin: 0 20px;
  }
  *{margin: 0;padding: 0;}
  p{margin: 10px 0;}
  ul,li{list-style: none;}
  ul{width: 100%; height: 80px; background: #aaa;display: flex; align-items: center;justify-content: center;}
  ul li{ padding: 0 5px; color: #fff;}
</style>

<body>
  <h2>jqery练习</h2>
  <p>1.jq选择器</p>
  <ul>
    <li>关于我们</li>
    <li>联系我们</li>
    <li>免责声明</li>
    <li>广告服务</li>
    <li>意见反馈</li>
  </ul>
</body>
<!-- 实际中使用压缩过的min.js  另一个主要是用来学习查看源码的 -->
<!-- <script src="./js/jquery-1.11.3.js"></script> -->
<script src="./js/jquery-1.11.3.min.js"></script>
<script>
  //id选择器  类选择器  属性选择器  伪类选择器
  //后代选择器：选取元素后面的某个元素
  //群组选择器：多个选择器进行相同的操作，逗号相隔
  //子代选择器：选取元素下某个元素
  //兄弟选择器：选取元素后面“所有”的某类元素
  //相邻选择器:选取元素后面“相邻”的某个元素
  $(function(){
    $("li+li").css("border-left","2px solid black") //相邻选择器
  })
</script>

</html>